<!--
  fileName: index.html
  description:
  date: 2023/2/23-14:29
  project: concurrent
  package: static
  email: 1085844536@qq.com
  version:
  @author WangGuojian
-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监控程序</title>
        <script type="text/javascript" src="/js/echarts.min.js"></script>
        <script type="text/javascript" src="/js/jquery.min.js"></script>
    </head>
    <body style="height: 500px; margin: 0">
        <div id="container" style="height: 100%"></div>
        <div>
            <input type="button" value="开始" id="start">
            <input type="button" value="停止" id="stop">
        </div>
        <script type="text/javascript">
            $("#start").click(function () {
                $.get("start");
            });
            $("#stop").click(function () {
                $.get("stop");
            });

            const dom = document.getElementById("container");
            const myChart = echarts.init(dom);
            option = null;
            let data = [];
            option = {
                title: {
                    text: "动态数据 + 时间坐标轴"
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: "总内存",
                    type: "line",
                    showSymbol: true,
                    areaStyle: {color: "rgba(0,200,40,0.7)"},
                    hoverAnimation: true,
                    data: []
                }, {
                    name: "已使用",
                    type: "line",
                    showSymbol: true,
                    areaStyle: {color: "rgba(0,0,200,0.7)"},
                    data: []
                }]
            };

            setInterval(function () {
                $.get("info").done(function (infos) {
                    while (data.length >= 10) {
                        data.shift();
                    }
                    data.push(...infos);
                    let max = data.map(d => [d.time, d.max]);
                    let total = data.map(d => [d.time, d.total]);
                    let used = data.map(d => [d.time, d.total - d.free]);
                    myChart.setOption({
                        series: [{
                            data: total
                        }, {
                            data: used
                        }]
                    });
                });
            }, 2000);

            myChart.setOption(option, true);
        </script>
    </body>
</html>